<template>
  <div id="recharge">
    <div class="card mb-0">
      <div class="card-body py-2">
        <form class="">
          产品:
          <select
            class="form-control form-control-sm ms-1"
            v-model="productCode"
          >
            <option value="">请选择</option>
            <template v-for="info in products">
              <option :value="info.productCode" :key="info.id">
                {{ info.productName }}
              </option>
            </template>
          </select>
          <template v-if="priceList.length > 0">
            价格:
            <select
              class="form-control form-control-sm ms-1"
              v-model.number="priceMode"
            >
              <template v-for="info in priceList">
                <option :value="info.id" :key="info.id">{{ info.name }}</option>
              </template>
            </select>
          </template>
          <span class="ms-1 me-2 text-success"><strong>^_^</strong></span>
          <template v-if="buyInfo !== null">
            <template v-if="buyInfo.productCode === null">
              <span class="text-danger">无购买记录</span>
            </template>
            <template v-else>
              有效期：
              <span class="text-success">{{ buyInfo.endTime }}</span>
            </template>
            <template v-if="productCode === 'P001'">
              <button
                type="button"
                class="btn btn-primary btn-sm ms-3"
                @click.stop="buyProduct"
              >
                免费购买
              </button>
            </template>
            <template v-else>
              <button
                type="button"
                class="btn btn-primary btn-sm ms-3"
                @click.stop="buyProduct"
              >
                购买
              </button>
            </template>
          </template>

          <a
            :href="
              `http://flights.ctrip.com/?AllianceID=23642&sid=` +
              sid +
              `&ouid=&app=0301C00`
            "
            target="_blank"
            class="buk-nav-item text-primary ms-2"
            >机票预订</a
          >

          <a
            :href="
              `http://hotels.ctrip.com/?AllianceID=23642&sid=` +
              sid +
              `&ouid=&app=0301C00`
            "
            target="_blank"
            class="buk-nav-item text-primary ms-2"
            >酒店预订</a
          >

          <a
            :href="
              `http://trains.ctrip.com/TrainBooking/SearchTrain.aspx?AllianceID=23642&sid=` +
              sid +
              `&ouid=&app=0301C00###`
            "
            target="_blank"
            class="buk-nav-item text-primary ms-2"
            >火车票预订</a
          >

          <a
            :href="
              `http://piao.ctrip.com/?AllianceID=23642&sid=` +
              sid +
              `&ouid=&app=0301C00`
            "
            target="_blank"
            class="buk-nav-item text-primary ms-2"
            >门票预订</a
          >
        </form>
      </div>
      <div class="card-body">
        <span>注意：</span
        >自2021年2月1日起，行程单打印功能将只对使用TMS（差旅管理系统）的用户开放。
      </div>
    </div>
    <div class="card">
      <div class="card-header bg-info text-white">
        充值
        <router-link to="/trans/histories" class="float-end"
          >交易记录</router-link
        >
      </div>
      <div class="card-body py-1">
        <div class="row">
          <div class="col-3">
            <label>当前账户</label>
            <span id="curUsername">{{ enterpriseName }}</span>
          </div>
          <div class="col-3">
            <label>积分账户</label>
            <span id="curBitcoinAmount">{{ balance }}积分</span>
            <small
              ><a
                href="javascript:void(0);"
                @click.stop="buyPoints()"
                title="使用现金账户中的余额购买积分"
                >购买</a
              ></small
            >
          </div>
          <div class="col-3">
            <label>现金账户</label>
            <span id="curCashAmount">{{ cashBalanceYuan }}元</span>
          </div>
        </div>
      </div>

      <ul class="nav nav-tabs mt-2" id="myTab">
        <li class="nav-item">
          <a href="#alipay" class="nav-link active">支付宝</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="alipay">
          <div class="alert alert-info">
            支付宝可实时到账，支付前请确认您已开通支付宝，并确保金额不超过您的支付限额。
          </div>
          <form class="form-horizontal" target="_blank">
            <div class="row">
              <label
                class="offset-md-2 col-2 control-label text-end"
                for="amount"
                >金额(元)</label
              >
              <div class="col-4">
                <input
                  type="textfield"
                  name="amount"
                  class="form-control"
                  v-model.number="amount"
                />
              </div>
            </div>
            <div class="row">
              <div class="offset-md-4 col-4 text-center">
                <button
                  type="button"
                  class="btn btn-primary "
                  @click.stop.prevent="recharge()"
                >
                  充值
                </button>
              </div>
            </div>
            <div class="row">
              <div class="col-6 ms-auto me-auto">
                <span class="help-block">
                  <ul class="list-unstyled">
                    <li>&nbsp;</li>
                    <li>
                      <span class="text-danger">实际入账金额</span> = 充值金额 -
                      (<span class="text-danger">1.5%</span> x 充值金额)
                    </li>
                    <li>&nbsp;</li>
                    <li>
                      如果没有打开在线支付新窗口，请检查您的浏览器是否阻止本网页打开新窗口。
                    </li>
                  </ul>
                </span>
              </div>
            </div>
          </form>
        </div>
        <div id="paymentForm"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchBalance,
  buyPoints,
  recharge,
  searchSoftProducts,
  searchSoftProductBuyInfo,
  buySoftProduct,
} from "@/api/user.js";
import $ from "jquery";

export default {
  data() {
    return {
      enterpriseName: "",
      balance: 0,
      cashBalanceYuan: 0,
      frozenBalanceYuan: 0,
      creditLimitYuan: 0,

      amount: 0,
      products: [],
      priceList: [],
      priceMode: 0,
      productCode: "",
      buyInfo: null,
    };
  },
  computed: {
    sid() {
      return this.$store.state.sid;
    },
  },
  mounted: function () {
    this.searchBalance();
    this.searchSoftProducts();
  },
  watch: {
    productCode: function (newVal) {
      this.searchBuyInfo();
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    searchBalance: function () {
      searchBalance((jsonResult) => {
        this.enterpriseName = jsonResult.enterpriseName;
        this.balance = jsonResult.balance;
        this.cashBalanceYuan = jsonResult.cashBalanceYuan;
        this.frozenBalanceYuan = jsonResult.frozenBalanceYuan;
        this.creditLimitYuan = jsonResult.creditLimitYuan;
      });
    },
    buyPoints: function () {
      buyPoints((jsonResult) => {
        if (jsonResult.status === "OK") {
          this.showErrMsg(jsonResult.desc + jsonResult.errmsg);
          this.searchBalance();
        } else {
          this.showErrMsg("操作失败： " + jsonResult.errmsg);
        }
      });
    },
    recharge: function () {
      console.log(this.amount);
      const reg = new RegExp(/^\d*\.?\d{0,2}$/);
      if (!reg.test(this.amount)) {
        this.showErrMsg("请检查输入格式");
        return false;
      }

      if (this.amount < 200) {
        this.showErrMsg("付款金额必须为200元的倍数", "danger");
        return false;
      }

      recharge(this.amount, (v) => {
        if (v.status === "OK") {
          this.showErrMsg(
            "如果没有打开在线支付新窗口，请检查您的浏览器是否阻止本网页打开新窗口。",
            "info"
          );
          console.log(v.url);
          $("#paymentForm").empty().html(v.url);
          document.forms["alipaysubmit"].submit();
        } else {
          this.showErrMsg(v.errmsg, "danger");
        }
      });
    },
    searchSoftProducts: function () {
      searchSoftProducts((v) => {
        this.products = v.dataList;
      });
    },
    searchBuyInfo: function () {
      this.priceList.splice(0);
      // 查找购买信息
      const params = {
        productCode: this.productCode,
      };
      searchSoftProductBuyInfo(params, (v) => {
        // console.log(v)
        this.buyInfo = v;

        const productInfo = v.product;
        if (productInfo.chargeUnit === 2) {
          //按月付费
          this.priceList.push({
            id: 0,
            name: "零售价: " + productInfo.retailPrice / 100 + "元/月",
          });
          if (productInfo.wholesalePrice !== null) {
            //有批发价
            this.priceList.push({
              id: 1,
              name:
                "批发价: " +
                productInfo.minWholesaleCount +
                " * " +
                productInfo.wholesalePrice / 100 +
                "元/月",
            });
          }
          this.priceMode = 0;
        }
      });
    },
    buyProduct: function () {
      this.showLoading();
      const params = {
        productCode: this.productCode,
        priceMode: this.priceMode,
      };
      buySoftProduct(
        params,
        (v) => {
          // console.log(v)
          if (v.status === "OK") {
            this.showErrMsg("购买成功");
            this.searchBuyInfo();
          } else {
            this.showErrMsg(v.errmsg, "danger");
          }
        },
        () => {
          this.hideLoading();
        }
      );
    },
  },
};
</script>
